import { Table } from 'antd';
import React, { Component } from 'react';
import qs from 'qs';
import './index.css'
class User extends Component<any, any> {
    state={
        loading:false,
        tableParams:{
            pagination: {
                current: 1,
                pageSize: 10,
              }
        },
        data:null
    }


     columns = [
        {
          title: 'Name',
          dataIndex: 'name',
          sorter: true,
          render: (name) => `${name.first} ${name.last}`,
          width: '20%',
        },
        {
          title: 'Gender',
          dataIndex: 'gender',
          filters: [
            {
              text: 'Male',
              value: 'male',
            },
            {
              text: 'Female',
              value: 'female',
            },
          ],
          width: '20%',
        },
        {
          title: 'Email',
          dataIndex: 'email',
        },
      ];

       getRandomuserParams = (params) => ({
        results: params.pagination?.pageSize,
        page: params.pagination?.current,
        ...params,
      });
      fetchData = () => {
        this.setState({...this.state,loading:true})
        console.log("fetchData")
        fetch(`https://randomuser.me/api?${qs.stringify(this.getRandomuserParams(this.state.tableParams))}`)
          .then((res) => res.json())
          .then(({ results }) => {
            this.setState({...this.state,loading:false,data:results,tableParams:{...this.state.tableParams,pagination:{...this.state.tableParams.pagination,total:200}}})
        
            });
          };

           handleTableChange = (pagination, filters, sorter) => {
        
            this.setState({...this.state,tableParams:{pagination,
                filters,
                ...sorter}})
          };


          componentDidMount() { 
            this.fetchData()
           }
    render() {
        return (
            <div>
                <Table
                    columns={this.columns}
                    rowKey={(record:any) => record.login.uuid}
                    dataSource={this.state.data}
                    pagination={this.state.tableParams.pagination}
                    loading={this.state.loading}
                    onChange={this.handleTableChange}
                    sticky
                    footer={(currentPageData)=>{
                        console.log(currentPageData)
                        return <div>总条数:{currentPageData.length}</div>
                    }}
                />
            </div>
        );
    }
}

export default User;
